<template>
  <div class="wrap-table">
    <el-form
      ref="form"
      :model="searchData"
      label-width="100px"
      class="clearfix flex-div"
    >
      <el-form-item label="时间范围" style="width: 350px">
        <div class="block">
          <el-date-picker
            v-model="timeDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="研究组别" class="item-right" style="width: 220px">
        <el-select
          v-model="searchData.groupType"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试验类型" class="item-right" style="width: 240px">
        <el-select v-model="searchData.testType" clearable placeholder="请选择">
          <el-option
            v-for="item in options6"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div class="flex-r-but">
        <el-button
          type="success"
          @click="outPut"
          :disabled="disabled"
          class="pull-right mg-lr-20 pd-bt"
          >导出</el-button
        >
      </div>
    </el-form>
    <div class="checkLists">
      <el-checkbox
        :indeterminate="true"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group v-model="items" @change="handleCheckedCitiesChange">
        <el-checkbox
          style="margin: 30px 0"
          v-for="item in listOptions"
          size="medium"
          :label="item.value"
          :key="item.value"
          >{{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
const Options = [
  {
    label: "Participants",
    value: 1,
  },
  {
    label: "HC CRF",
    value: 2,
  },
  {
    label: "HC Calendar",
    value: 3,
  },
  {
    label: "Breastfeeding prescription",
    value: 4,
  },
  {
    label: "Breastfeeding checklist",
    value: 5,
  },
  {
    label: "Growth tracker",
    value: 6,
  },
  {
    label: "Obesity clinic",
    value: 7,
  },
  {
    label: "Health education courses",
    value: 8,
  },
  {
    label: "Health messages",
    value: 9,
  },
  {
    label: "Nutrition consultation CRF",
    value: 10,
  },
  {
    label: "Health issues",
    value: 11,
  },
  {
    label: "HC session monitoring",
    value: 12,
  },
  {
    label: "self-reported for participants",
    value: 13,
  },
  {
    label: "self-reported for providers",
    value: 14,
  },
];
export default {
  data() {
    return {
      searchData: {
        groupType: "",
        testType: "",
      },
      timeDate: [],
      disabled: false,
      lists: [],
      listOptions: Options,
      items: [],
      checkAll: false,
      isIndeterminate: true,
      options3: [
        { value: "", label: "全部" },
        { value: "1", label: "A" },
        { value: "2", label: "B" },
      ],
      options6: [
        { value: "", label: "全部" },
        { value: "1", label: "预试验" },
        { value: "2", label: "正式试验" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate: function (val) {
          if (val > new Date()) return true;
        },
      },
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.items = val ? [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.lists.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.lists.length;
    },
    outPut() {
      //导出数据
      if (this.items.length == 0) {
        this.$message({
          type: "info",
          message: "请至少选择一项",
        });
        return;
      }
      // const params = { ...this.searchData };
      // params.startDate = this.timeDate[0] || "";
      // params.endDate = this.timeDate[1] || "";
      // this.disabled = true;
      // this.service({
      //   url: "/Statistic/ExportData",
      //   method: "get",
      //   params: {
      //     ...params,
      //     responseType: "blob",
      //     items: this.items.join(","),
      //   },
      // })
      //   .then((res) => {
      //     console.log(res);
      //     let blob = new Blob([res.data], { type: "application/octet-stream" });
      //     //let url = window.URL.createObjectURL(blob);
      //     //window.location.href = url;
      //     //this.disabled = false;
		  // let filename = fileName || 'filename.xls';// 判断是否使用默认文件名
		  // if (typeof window.navigator.msSaveBlob !== 'undefined') {
		  //   window.navigator.msSaveBlob(blob, filename);
		  // } else {
		  //   var blobURL = window.URL.createObjectURL(blob);// 将blob对象转为一个URL
		  //   var tempLink = document.createElement('a');// 创建一个a标签
		  //   tempLink.style.display = 'none';
		  //   tempLink.href = blobURL;
		  //   tempLink.setAttribute('download', filename);// 给a标签添加下载属性
		  //   if (typeof tempLink.download === 'undefined') {
		  //     tempLink.setAttribute('target', '_blank');
		  //   }
		  //   document.body.appendChild(tempLink);// 将a标签添加到body当中
		  //   tempLink.click();// 启动下载
		  //   document.body.removeChild(tempLink);// 下载完毕删除a标签
		  //   window.URL.revokeObjectURL(blobURL);
		  // }
      //   })
      //   .catch((e) => {
      //     console.log(e);
      //     this.disabled = false;
      //   });
      this.disabled = true
      window.open(
        window.origin +
          `/API/105/ExportStatisticDataHandler.ashx?items=${this.items.join(",")}&startDate=${this.timeDate[0] || ""}&endDate=${this.timeDate[1] || ""}&groupType=${this.searchData.groupType}&testType=${this.searchData.testType}`
      );
      setTimeout(() =>{
        this.disabled = false
      },1000)
    },
  },
  mounted() {},
};
</script>

<style>
</style>
